<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<title>信息管理系统</title>

		<style type="text/css">
			#sider {
				position: absolute;
				top: 0;
				left: 5px;
				bottom: 0px;
				width: 200px;
				border: 2px solid #DEDFDF;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="sider">
				
				<table class="table table-condensed" id="table1">
					<tr th:each="c:${configlist}">
						<td style="display: none" id="configid" th:text="${c.id}"></td>
						<td th:text="${c.configName}">Tanmay</td>
					</tr>
				</table>
			</div>
		</div>

		<div style="margin-left:205px ;">
			<div style="background-color: #EEEEEE;height: 30px;padding-top: 10px;">
				<span style="color:#00B83F" class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal3" ></span>&nbsp;<span>增加</span>&nbsp;&nbsp;
				<span style="color: white;" class="glyphicon glyphicon-list-alt" data-toggle="modal" data-target="#myModal1" id="save"></span>&nbsp;<span>编辑</span>&nbsp;&nbsp;
				<span style="color: red;" class="glyphicon glyphicon-remove" onclick="deletes()" id="del"></span>&nbsp;<span>删除</span><a id="dela"></a>&nbsp;&nbsp;
			</div>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>属性名称</th>
						<th>属性类型</th>
						<th>是否权限</th>
						<th>是否多选</th>

					</tr>
				</thead>
				<tbody id="tbody">


				</tbody>
			</table>

		</div>







		<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel1">
							新增
						</h4>
					</div>
					<form  th:action="@{/propertysavename}" method="post">
					<div class="modal-body">
						<div class="form-group">
							<label for="firstname">属性</label>
								<input type="hidden" name="genre" value=""/>
								<input type="hidden" name="jurisdiction" value="0"/>
								<input type="hidden" name="multipleChoice" value="0"/>
								<input type="hidden" id="configids" name="configId"/>
								<input type="text" name="propertyName" class="form-control" id="firstname"
									   placeholder="请输入属性">
						</div>

					</div>
					<div class="modal-footer">
						<button type="button"  class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="submit" class="btn btn-primary">
							提交
						</button>
					</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>










		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							更新
						</h4>
					</div>
					<form th:action="@{/updateByAll}">
					<div class="modal-body">
						<div class="form-group">
							<label for="firstname">属性</label>
							<input type="hidden" id="ids" name="id"/>
							<input type="text" class="form-control" name="propertyName" id="propertyName" placeholder="请输入属性">
						</div>
						<div class="form-group">
							<label for="firstname">多选</label>

							<select class="form-control"  id="multipleChoice" name="multipleChoice">

							</select>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" id="tpp" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" onclick="update()" id="but" class="btn btn-primary">
							提交更改
						</button>
					</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>



	</body>

</html>
<script>


	function deletes() {
        var pp=$("#tbody [class='active']").children("#idg").text();
        var propertyName =$("#propertyName").val();
        if(window.confirm("你确定要删除[ "+propertyName +" ]吗？")){

            $("#dela").attr("href","/deletese?id="+pp);
            $("#dela").click();
            document.getElementById("dela").click();
            return true;
        }else{
            return false;
        }


    }

	function update(){
	    var pp=$("#tbody [class='active']").children("#idg").text();
	    var propertyName =$("#propertyName").val();
        var multipleChoice=$("#multipleChoice").val();


        var params = {
            "id":pp,
            "propertyName":propertyName,
            "multipleChoice":multipleChoice
        }

		var url="/updateByAll";
        $.post(url,params,function (data) {
         $("#tbody [class='active']").children("#idg").text(data.id);
            $("#tbody [class='active']").children("#propertyNames").text(data.propertyName);
            $("#tbody [class='active']").children("#genres").text(data.genre);
            $("#tbody [class='active']").children("#jurisdiction").text(data.jurisdiction);

            if(data.jurisdiction==0){
                $("#tbody [class='active']").children("#jurisdictions").text("否");
            }else{
                $("#tbody [class='active']").children("#jurisdictions").text("是");
            }
            if(data.multipleChoice==0){
                $("#tbody [class='active']").children("#multipleChoices").text("否");
            }else{
                $("#tbody [class='active']").children("#multipleChoices").text("是");
            }



        })
        document.getElementById("tpp").click();



	}

	$(function () {
	    $("#table1 tr:first").click();
	    $("#save").attr("data-target","")
		$("#del").attr("data-target","")
        $("#save").prop("style","color:burlywood");
        $("#del").prop("style","color:burlywood");

    })
	function property(data) {
        $("#save").attr("data-target","#myModal1")
        $("#del").attr("data-target","jj")
        $("#save").prop("style","color:#00B83F");
        $("#del").prop("style","color:#FF1493");
        $("[name="+data+"]").prop("class","active").siblings().removeClass("active")
		var url="/selectAllById";
        var params="id="+data;
        $.post(url,params,function (date) {
            $("#ids").val(date.id);
            $("#propertyName").val(date.propertyName);
            var select;
            if(date.multipleChoice==0){
                select+="<option value='0' selected>否</option>";
                select+="<option value='1'>是</option>";
            }else{
                select+="<option value='1' selected>是</option>";
                select+="<option value='0'>否</option>";
            }

            $("#multipleChoice").html(select);







        })

    }



	$("#table1 tr").click(function () {


        $("#save").attr("data-target","")
        $("#del").attr("data-target","")
        $("#save").prop("style","color:burlywood");
        $("#del").prop("style","color:burlywood");
		$(this).prop("class","active").siblings().removeClass("active")
		var id=$(this).children("#configid").text();
        $("#configids").val(id);
		var url="/configproperty";
		var params="id="+id;
		$.post(url,params,function (data) {
			var tr="";
                for(var i=0;i<data.length;i++){
                    tr=tr+"<tr name=\""+data[i].id+"\" onclick='property(\""+data[i].id+"\")'>"
                    tr=tr+"<td style='display: none' id='idg'>"+data[i].id+"</td>"
                    tr=tr+"<td id='propertyNames'>"+data[i].propertyName+"</td>"
                    tr=tr+"<td id='genres'>"+data[i].genre+"</td>"
                    if(data[i].jurisdiction==0){
                        tr=tr+"<td id='jurisdictions'>"+"否"+"</td>"
                    }else{
                        tr=tr+"<td id='jurisdictions'>"+"是"+"</td>"
                    }
                    if(data[i].multipleChoice==0){
                        tr=tr+"<td id='multipleChoices'>"+"否"+"</td>"
                    }else{
                        tr=tr+"<td id='multipleChoices'>"+"是"+"</td>"
                    }
                tr=tr+"</tr>"
			}
			$("#tbody").html(tr);
        })


    })

</script>